<template>
  <div id="modelsign">
    <v-progress-circular
      indeterminate
      color="blue"
      v-show="load"
      style="padding-left: 160%;margin-top: -265%"
    ></v-progress-circular>
    <el-dialog :visible.sync="signVisible.v"  title="注册并行模型"  v-dialogDrag>
      <!--<p>注册并行模型</p>-->
      <el-upload
        class="upload-demo"
        action=""
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :auto-upload=false
        :on-change="handleChange"
        multiple
        :limit="4"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary" style="margin-left: 550%">选取文件</el-button>
        <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
      </el-upload>
      <v-btn id="signbtn" @click="submitfile()">注册</v-btn>
      <v-btn @click="cancle">取消</v-btn>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "modelSign",
    data() {
      return {
        load: false,
        fileList: []
      }
    },
    props: {
      signVisible: Object,
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      handleChange(file, fileList) {
        console.log(fileList);
        this.fileList=fileList;
      },
      submitfile() {
        let hasXml = false;
        let hasJar = false;
        let hasZip = false;
        let hasPic = false;
        let hasPy = false;
        for (let file of this.fileList) {
          let fileType = file.name.match(/\.(\S*)/)[1];
          console.log(fileType);
          switch (fileType) {
            case 'xml':
              hasXml = true;
              break;
            case 'jar':
              hasJar = true;
              break;
            case 'png' || 'jpg':
              hasPic = true;
              break;
            case 'zip':
              hasZip = true;
              break;
            case 'py':
              hasPy = true;
              break;
          }
        }
        if((hasPy||hasJar)&&hasXml){
          let obj = this;
          let filedata = new FormData();
          for(let updata of this.fileList){
            console.log(updata);
            filedata.append('file', updata.raw);
          }
          console.log(filedata);
          this.signVisible.v = false;
          obj.$message({
            type: 'info',
            message: '请稍候……',
            duration: 1000
          });
          this.load = true;
          this.$axios.post(
            // url: 'http://192.168.240.25:3000/dldsj/parallel/register',
            '/parallel/register'
            , filedata
          ).then(function (response) {
            obj.load = false;
            if (response.code === 200) {
              obj.$emit('childRefresh');
              obj.$message({
                type: 'success',
                message: '模型注册成功!'
              })
            } else {
              obj.$message.error('模型注册失败!');
            }
            //判断是否注册成功进行弹窗
          }).catch(function (error) {
            obj.load = false;
            obj.$message.error('模型注册失败!');
          });
          this.fileList=[];
        }else{
          this.$message.error('请检查上传文件是否正确');
        }
      },
      cancle() {
        this.signVisible.v = false;
        this.fileList = [];
      }
    }
  }
</script>

<style>

  #signbtn:hover {
    color: #4d9bf7;
  }

  #modelsign input {
    font-size: 0;
    position: absolute;
    left: -999px;
  }

  #modelsign input::-webkit-file-upload-button {
    background: #efeeee;
    color: #333;
    border: 0;
    padding: 40px 100px;
    border-radius: 5px;
    font-size: 12px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1), 0 0 10px rgba(0, 0, 0, .12);
  }
</style>
